<template>
    <el-card style="max-width: 480px; margin: 300px auto;">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
            label-width="auto" class="demo-ruleForm">
            <el-form-item label="账号" prop="UserName">
                <el-input v-model="ruleForm.UserName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="UserPwd">
                <el-input v-model="ruleForm.UserPwd" show-password autocomplete="off" />
            </el-form-item>
            <el-form-item label="记住密码" prop="UserPwd">
                <!-- 滑块记住密码 -->
                <el-switch v-model="ruleForm.IsRemember" inline-prompt active-text="记住密码" inactive-text="忘记密码" />
            </el-form-item>



            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    登录
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter();
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    "UserName": "",
    "UserPwd": "",
    IsRemember: false
})
const rules = reactive<FormRules<typeof ruleForm>>({
    UserName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    UserPwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
})
//登录
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            axios.post("/api/Users/UserLogin", ruleForm).then(res => {
                console.log(res.data);
                if (res.data.Num == 200) {
                    ElMessage.success(res.data.Message);
                    //记录用户数据
                    localStorage.setItem("UserName", res.data.Data.UserName)
                    localStorage.setItem("RealName", res.data.Data.RealName)
                    localStorage.setItem("RoleName", res.data.Data.RoleName)
                    if (ruleForm.IsRemember == true) {

                        localStorage.setItem("WriteUserName", ruleForm.UserName)
                        localStorage.setItem("WriteUserPwd", ruleForm.UserPwd)
                    }
                    else {
                        localStorage.setItem("WriteUserName", "")
                        localStorage.setItem("WriteUserPwd", "")
                    }
                    //页面跳转
                    router.push("Menu")
                }
                else {
                    ElMessage.error(res.data.Message);
                }

            })
        } else {
            console.log('error submit!')
        }
    })
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const Rememberway = () => {
    if (localStorage.getItem("WriteUserName") != "") {
        ruleForm.IsRemember = true;
        ruleForm.UserName = localStorage.getItem("WriteUserName") || "";
        ruleForm.UserPwd = localStorage.getItem("WriteUserPwd") || ""
    }
}
onMounted(() => {
    Rememberway();
})
</script>
